import React, { useEffect, useState } from 'react';
import styles from './student.less';
import '../../../../src/global.css'
import { Table, Form, Input, Button, Select,Popconfirm  } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { ClassModelState } from '@/models/class.module'
import { classList } from '@/interface/class'


let Student:React.FC =function() {
  let dispatch = useDispatch();
  useEffect(()=>{
    dispatch({
      type: 'classManage/studentManage'
    })
    dispatch({
      type: 'classManage/roomManage'
    })
    dispatch({
      type: 'classManage/classManage'
    })
  },[])
  const {studentList,roomList,classList} = useSelector((model:{classManage:ClassModelState})=>model.classManage);

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '学号',
      dataIndex: 'number',
      key: 'number',
    },
    {
      title: '班级',
      dataIndex: 'class',
      key: 'class',
    },
    {
      title: '教室',
      dataIndex: 'room',
      key: 'room',
    },
    {
      title: '密码',
      dataIndex: 'pwd',
      key: 'pwd',
    },
    {
      title: '操作',
      key: 'action',
      render: (text:any) => (
        <Popconfirm placement="top" title='确定删除吗' onConfirm={()=>deleteStudent(text.key)} okText="确定" cancelText="取消">
          <span>删除</span>
        </Popconfirm>
      ),
    },
  ];
  //删除学生
  const deleteStudent=(id:string)=>{
    dispatch({
      type: 'classManage/deleteStudent',
      payload: {
        id
      }
    })
  }

  let data:any = [];
  studentList.map(item=>{
    data.push({
      key: item.student_id,
      name: item.student_name,
      number: item.student_id,
      class: item.grade_name,
      room: item.room_text,
      pwd: item.student_pwd
    })
  })

  const { Option } = Select;

  const layout = {
    wrapperCol: { span: 50},
  };
  const tailLayout = {
    wrapperCol: { offset: 0, span: 30 },
  };

  const [form] = Form.useForm();
 

  let [searchList,setSearchList] = useState([])
  const onFinish=(values:any)=>{
    console.log(values)
    let sear = data.filter((item:any)=>{
     return item.name.includes(values.name) || item.room.includes(values.room) || item.class.includes(values.class)
    })
    setSearchList(sear)
  }
  console.log(searchList)


  //重置按钮
  const onReset = () => {
    form.resetFields();
    setSearchList(data)
  };



  return (
    <div className={styles.studentBox}>
      <h2>学生管理</h2>
      <div className={styles.searchBox}>
            <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                <Form.Item name="name">
                  <Input placeholder="输入学生姓名"/>
                </Form.Item>
                <Form.Item name="room">
                  <Select
                    placeholder="请选择教室号"
                    allowClear
                  >
                    {roomList.map(item=>{
                        return  <Option value={item.room_text} key={item.room_id}>
                          {item.room_text}
                        </Option>
                      })}
                  </Select>
                </Form.Item>
                <Form.Item name="class">
                  <Select
                    placeholder="班级名"
                    allowClear
                  >
                    {classList.map(item=>{
                        return  <Option value={item.grade_name} key={item.grade_id}>
                          {item.grade_name}
                        </Option>
                      })}
                  </Select>
                </Form.Item>
                
                <Form.Item {...tailLayout}>
                  <Button type="primary" htmlType="submit">
                    搜索
                  </Button>
                  <Button htmlType="reset" onClick={onReset}>
                    重置
                  </Button>
                </Form.Item>
              </Form>
      </div>
      <div className={styles.classBox}>
        <Table columns={columns} dataSource={searchList.length? searchList:data} />
      </div>
  </div>
  );
}
export default Student
